import { useState, useEffect } from 'react';

import { StyleSheet, Text, View, ScrollView, Pressable, ActivityIndicator } from 'react-native';

import { useLocalSearchParams, router, Stack } from 'expo-router';

import { format } from 'date-fns';

import { ptBR } from 'date-fns/locale';

import { Card, SubtleInfoCard } from '@/components/ui/Cards';

import { Badge } from '@/components/ui/Badge';

import { Button } from '@/components/ui/Button';

import { Col, Between, Row } from '@/components/ui/LayoutHelpers';

import { Section, SectionHeader } from '@/components/ui/Sections';

import { Theme, Colors, Spacing } from '@/constants/theme';

import { getMood } from '@/constants/moods';

import { getMoodComponent, intensityLabel, intensityToValue } from '@/constants/mood-components';

import { useMoodEntry, useDeleteMoodEntry } from '@/hooks';

import { getTimeBadge, formatMoment } from '@/lib/utils/time';

import { MoodComponentCard } from '@/components/ui/MoodComponentCard';

export default function MoodDetailScreen() {

  const { id } = useLocalSearchParams<{ id: string }>();

  const { data: entry, isLoading, isError } = useMoodEntry(id);

  const deleteMoodEntry = useDeleteMoodEntry();

  const [minutesLeft, setMinutesLeft] = useState(0);

  const [canDelete, setCanDelete] = useState(false);

  if (isLoading) {

    return (

      <View style={styles.centered}>

        <ActivityIndicator size="large" color={Theme.colors.tint} />

      </View>

    );

  }

  if (isError || !entry) {

    return (

      <View style={styles.centered}>

        <Text style={styles.errorText}>Registro não encontrado.</Text>

        <Pressable onPress={() => router.back()} style={styles.backButton}>

          <Text style={styles.backButtonText}>Voltar</Text>

        </Pressable>

      </View>

    );

  }

  const moment = new Date(entry.moment);

  const moodDef = getMood(entry.selectedMood.toLowerCase());

  const badge = getTimeBadge(moment);

  useEffect(() => {

    const updateTimer = () => {

      const moment = new Date(entry.moment);

      const createdAt = new Date(entry.moment);

      const msSinceCreation = Date.now() - createdAt.getTime();

      const deletionWindowMs = 5 * 60 * 1000;

      const newCanDelete = msSinceCreation < deletionWindowMs;

      const newMinutesLeft = Math.max(0, Math.ceil((deletionWindowMs - msSinceCreation) / 60000));

      setCanDelete(newCanDelete);

      setMinutesLeft(newMinutesLeft);

    };

    updateTimer(); // Set initial values

    const interval = setInterval(updateTimer, 1000);

    return () => clearInterval(interval);

  }, [entry.moment]);

  const handleDelete = async () => {

    await deleteMoodEntry.mutateAsync(String(entry.id));

    router.back();

  };

  const deleteButtonMsg = () => {

    const msg = "Excluir Registro";

    const timeLeftStr = `(Disponível por ${minutesLeft < 1 ? '<1' : minutesLeft}:00)`;

    const suffix = canDelete ? timeLeftStr : "(Expirado)"

    return `${msg} ${suffix}`

  }

  return (

    <>

      <Stack.Screen options={{ title: 'Ver detalhes' }} />

      <ScrollView

        style={styles.container}

        contentContainerStyle={styles.content}

        showsVerticalScrollIndicator={false}

      >

        {/* Header card */}

        <Card style={styles.headerCard}>

          <Between>

            <Row gap={12} style={{ alignItems: 'center' }}>

              <Text style={styles.moodIcon}>{moodDef?.icon ?? '😐'}</Text>

              <Col gap={2}>

                <Text style={styles.moodLabel}>{moodDef?.label ?? entry.selectedMood}</Text>

                <Text style={styles.moodTime}>{formatMoment(moment)}</Text>

              </Col>

            </Row>

            <Badge

              label="Registro Ativo"

              backgroundColor={Theme.colors.activeBackground}

              color={Theme.colors.tint}

            />

          </Between>

        </Card>

        {/* Core levels */}

        <Section>

          <SectionHeader title="Níveis" variant="subtle" />

            {[

              { label: 'Energia',  value: entry.energyLevel  },

              { label: 'Estresse', value: entry.stressLevel  },

              { label: 'Ansiedade', value: entry.anxietyLevel },

            ].map((item, index, arr) => (

              <Card style={{ padding: Spacing.cardGap }}>

                <View key={item.label}>

                  <View style={styles.componentRow}>

                    <Text style={styles.componentLabel}>{item.label}</Text>

                    <Text style={styles.componentIntensityGreen}>{item.value}/10</Text>

                  </View>

                  <View style={styles.progressTrack}>

                    <View style={[styles.progressFill, { width: `${(item.value / 10) * 100}%` }]} />

                  </View>

                </View>

              </Card>

            ))}

        </Section>

        <Section>

          <SectionHeader title="Componentes" variant="subtle" />

          <Col gap={0}>

            {entry.moodComponents.map((comp, index) => {

              const def = getMoodComponent(comp.component.toLowerCase());

              const numericIntensity = comp.intensity === 'LIGHT' ? 2 : comp.intensity === 'MODERATE' ? 5 : 8;

              return (

                <MoodComponentCard

                  key={comp.id}

                  id={comp.component.toLowerCase()}

                  intensity={comp.intensity}

                />

              );

            })}

          </Col>

        </Section>

        {/* Annotation / notes */}

        {entry.annotation && (

          <Section>

            <SectionHeader title="Notas" variant="subtle" />

            <Card style={{ padding: Spacing.cardGap }}>

              <Text style={styles.annotation}>"{entry.annotation?.trim()}"</Text>

            </Card>

          </Section>

        )}

        {/* Delete */}

        <View style={styles.section}>

          <Text style={styles.sectionLabel}>GESTÃO DO REGISTRO</Text>

          <Button variant="danger"

            isLoading={deleteMoodEntry.isPending}

            disabled={!canDelete || deleteMoodEntry.isPending}

            onPress={handleDelete}

            title={deleteButtonMsg()} />

          <SubtleInfoCard style={styles.deleteInfo}

            text={`

              A exclusão de registros é permitida apenas nos primeiros 5 minutos

              após o envio para garantir a integridade do histórico emocional.

              `} />

        </View>

      </ScrollView>

    </>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: Theme.colors.background,

  },

  content: {

    padding: Spacing.containerPadding,

    gap: Spacing.sectionGap,

    paddingBottom: 48,

  },

  centered: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    gap: 12,

  },

  errorText: {

    fontSize: 15,

    color: Colors.light.textSecondary,

  },

  backButton: {

    paddingHorizontal: 20,

    paddingVertical: 10,

    backgroundColor: Theme.colors.tint,

    borderRadius: Theme.borderRadius.md,

  },

  backButtonText: {

    fontWeight: '700',

    color: Theme.colors.text,

  },

  // Header

  headerCard: {

    padding: 16,

  },

  moodIcon: {

    fontSize: 40,

  },

  moodLabel: {

    fontSize: 17,

    fontWeight: '700',

    color: Colors.light.text,

  },

  moodTime: {

    fontSize: 13,

    color: Colors.light.textSecondary,

  },

  // Sections

  section: {

    gap: 8,

  },

  sectionLabel: {

    fontSize: 11,

    fontWeight: '600',

    letterSpacing: 0.8,

    color: Colors.light.textSecondary,

    textTransform: 'uppercase',

  },

  // Components

  componentRow: {

    flexDirection: 'row',

    justifyContent: 'space-between',

    alignItems: 'center',

    paddingVertical: 10,

  },

  componentLabel: {

    fontSize: 15,

    fontWeight: '700',

    color: Colors.light.text,

  },

  componentIntensity: {

    fontSize: 13,

    color: Colors.light.textSecondary,

  },

  componentIntensityGreen: {

    fontSize: 13,

    fontWeight: '700',

    color: Theme.colors.tint,

  },

  progressTrack: {

    height: 6,

    backgroundColor: Theme.colors.light.divider,

    borderRadius: Theme.borderRadius.full,

    marginBottom: 4,

    overflow: 'hidden',

  },

  progressFill: {

    height: '100%',

    backgroundColor: Theme.colors.light.tint,

    borderRadius: Theme.borderRadius.full,

  },

  // Annotation

  annotation: {

    fontSize: 14,

    lineHeight: 22,

    color: Colors.light.textSecondary,

    fontStyle: 'italic',

    padding: 4,

  },

});